<template>
  <!-- 安全演练记录详情 -->
  <!-- <view class="fireSkitsDetail">
    <view class="wrapper">
      <view class="wrapper-item">
        <u-form :model="form" ref="form" label-width="280" labelPosition="’top‘" :error-type="errorType">
          <u-form-item label="演练主题:" :borderBottom="false">
            <view class="conView">{{ form.drillTheme }}</view>
          </u-form-item>
          <u-form-item label="演练地点:" :borderBottom="false">
            <view class="conView">{{ form.drillPlace }}</view>
          </u-form-item>
          <u-form-item label="演练时间:" :borderBottom="false">
            <view class="conView">{{ form.drillTime }}</view>
          </u-form-item>
          <u-form-item label="参加演练人员:" :borderBottom="false">
            <view class="conView">{{ form.drillPerson }}</view>
          </u-form-item>
          <u-form-item label="演练内容:" :borderBottom="false">
            <view class="textMeeter">
              {{ form.drillContent }}
            </view>
          </u-form-item>
          <u-form-item label="现场图片:" border="none">
            <view class="photo-class" :class="purifyImageList.length <= 2 ? 'photoAfter' : ''">
              <image :src="item" v-for="(item, i) in purifyImageList" :key="i" mode="aspectFill"
                @click="pvwImage([item])"></image>
            </view>
          </u-form-item>
        </u-form>
      </view>
    </view>
  </view> -->
  <view class="root">
    <view class="container-wrapper">
      <view class="i-item">
        <view class="i-title">
          <view class="i-title-inner">演练主题:</view>
        </view>
        <view class="i-value">{{ form.drillTheme }}</view>
      </view>
      <view class="i-item">
        <view class="i-title">
          <view class="i-title-inner">演练地点:</view>
        </view>
        <view class="i-value">{{ form.drillPlace }}</view>
      </view>
      <view class="i-item">
        <view class="i-title">
          <view class="i-title-inner">演练时间:</view>
        </view>
        <view class="i-value">{{ form.drillTime }}</view>
      </view>
      <view class="i-item">
        <view class="i-title">
          <view class="i-title-inner">演练人员:</view>
        </view>
        <view class="i-value">{{ form.drillPerson }}</view>
      </view>
      <view class="i-item">
        <view class="i-title">
          <view class="i-title-inner">演练内容:</view>
        </view>
        <view class="i-value">{{ form.drillContent }}</view>
      </view>
      <view class="i-item">
        <view class="i-title">
          <view class="i-title-inner">现场图片:</view>
        </view>
        <view class="i-value">
          <view class="photo-class">
            <image class="image-style" :src="item" v-for="(item, i) in purifyImageList" :key="i" mode="aspectFill"
              @click="pvwImage(purifyImageList)"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    FireDrillDetail,
    imagesPathList
  } from "@/api/myself.js";
  import {
    navBack,
    handleClickRouter,
    formatters,
    pvwImage,
  } from "@/utils/util.js";

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        options: {},
        form: {},
        errorType: ["none"],
        purifyImageList: [],
      };
    },
    onLoad(options) {
      this.options = options;
      this.getDetail();
    },
    methods: {
      handleClickRouter,
      navBack,
      formatters,
      pvwImage,
      getDetail() {
        imagesPathList({
          bizId: this.options.id,
          bizType: 21
        }).then((res) => {
          if (res.code == 200 && res.result.length) {
            for (let v of res.result) {
              this.purifyImageList.push(this.imgPrefix + v.path);
            }
          }
        });

        FireDrillDetail({
          id: this.options.id
        }).then((res) => {
          if (res.code == 200) {
            this.form = res.result;
            this.form.drillTime = formatters(
              this.form.drillTime,
              "YY/MM/DD HH:mm"
            );
          }
        });
      },
    },
  };
</script>

<style>
  page {
    background-color: #F9F9F9 !important;
    height: 100%;
    padding: 16rpx;
  }
</style>

<style lang="scss" scoped>
  .root {
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.1608);
    border-radius: 8rpx 8rpx 8rpx 8rpx;

    .container-wrapper {
      padding: 35rpx 27rpx;

      .i-item {
        display: flex;
        margin-bottom: 29rpx;

        .i-title {
          font-weight: 400;
          font-size: 28rpx;
          color: #A2A2A2;
          display: flex;
          margin-right: 12rpx;

          .i-title-inner {
            width: 122rpx;
          }
        }

        .i-value {
          font-weight: 500;
          font-size: 28rpx;
          color: #1A1A1A;
        }

        .photo-class {
          .image-style {
            width: 240rpx;
            height: 180rpx;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            margin-right: 16rpx;
            margin-bottom: 10rpx;

            &:nth-child(2n) {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
</style>